如何将 JS 和 CSS 拆分为单独的 HTML 文件？答案 |
您所在的位置：网站首页 › htmlwebpackplugin chunks › 如何将 JS 和 CSS 拆分为单独的 HTML 文件？答案 |
|
我有一个非常具体的要求，我需要使用HtmlWebpackPlugin 将 JS 脚本标签拆分为一个文件，并将 CSS 链接标签拆分为另一个文件。 目前，both 脚本和链接标签都进入了both 文件。有没有办法分开做？ 这是我当前的 Webpack 文件： import webpack from 'webpack' import path from 'path' import HtmlWebpackPlugin from 'html-webpack-plugin' import ExtractTextPlugin from 'extract-text-webpack-plugin' import autoprefixer from 'autoprefixer' const extractCSS = new ExtractTextPlugin({ filename: 'css/app.bundle.css', allChunks: true }) const createCSSfile = new HtmlWebpackPlugin({ chunks: ['app'], minify: { collapseWhitespace: true }, hash: true, template: 'src/ejs/css.ejs', filename: 'templates/css.php' }) const createJSfile = new HtmlWebpackPlugin({ chunks: ['app'], minify: { collapseWhitespace: true }, hash: true, template: 'src/ejs/js.ejs', filename: 'templates/js.php' }) const config = { entry: { 'app': [ path.resolve(__dirname, 'src/js/app.js'), path.resolve(__dirname, 'src/scss/app.scss') ] }, output: { path: path.resolve(__dirname, 'dist'), publicPath: '/dist', filename: 'js/app.bundle.js', sourceMapFilename: 'js/app.bundle.map' }, devtool: 'source-map', watch: true, watchOptions: { ignored: /node_modules/, aggregateTimeout: 300, poll: 1000 }, module: { rules: [ { test: /\.(png|gif|jpg|jpeg)$/, use: [ { loader: 'file-loader', options: { name: '/images/[name].[ext]' } } ] }, { test: /\.(eot|ttf|woff|woff2|otf)$/, use: [ { loader: 'file-loader', options: { name: '/fonts/[name].[ext]' } } ] }, { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: [require('@babel/plugin-proposal-object-rest-spread')] } } }, { test: /\.scss$/, use: extractCSS.extract([ { loader: 'css-loader' }, { loader: 'postcss-loader', options: { plugins () { return [ autoprefixer({ browsers: [ 'last 2 versions', 'Safari >= 8', 'Explorer >= 9', 'Android >= 4' ] }) ] } } }, { loader: 'sass-loader' } ]) } ] }, plugins: [ new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify(process.env.NODE_ENV) } }), new webpack.optimize.CommonsChunkPlugin({ name: 'js/app.common', filename: 'js/app.common.js', minChunks: 2 }), createCSSfile, createJSfile, extractCSS ] } export default config每个.ejs 文件为空，并在.php 文件中生成以下内容： 有没有办法将它们分开？ 另外，我注意到它正在为 CSS 链接插入一个 head 标签；有没有办法阻止这种情况发生？ |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |